<template>
	
	<el-select
		v-model="value"
		filterable
		clearable
		remote
		reserve-keyword
		placeholder="请输入会员ID、名称、手机号"
		:remote-method="memRemoteMethod"
		remote-show-suffix
		:loading="loading"
		style="width: 100%;"
		@change="memChange"
	  >
		<el-option
		  v-for="item in options"
		  :key="item.id"
		  :label="item.name+'    会员号:'+item.meId+'    联系电话:'+item.phone+'     会员等级:'+item.grade"
		  :value="item.meId"
		>
			  <span style="float: left;font-weight: bold;margin-right: 10px;">{{ item.name}}</span>
			  <span style="float: left;margin-right: 10px;">会员号:{{ item.meId}}</span>
			  <span style="float: left;color: red;">联系电话:{{ item.phone }}</span>
			  <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">
				会员等级:{{ item.grade }}
			  </span>
		</el-option>
	  </el-select>
	
</template>

<script setup name="meElSelect">
	import { queryMemberInfo } from "@/api/crm/memberInfo";
	
	const emits = defineEmits(['change'])
	
	const value = ref(null);
	const loading = ref(false);
	const options = ref([]);
	
	
	function memRemoteMethod(query){
		if (query) {
		    loading.value = true
			queryMemberInfo(query).then(rsp=>{
				loading.value = false
				options.value = rsp.rows
			})
				
		  
		 } else {
		    options.value = []
		 }
	}
	
	function memChange(params){
		var meInfo = null;
		for (var i = 0; i < options.value.length; i++) {
			let item = options.value[i]
			if(item.meId == params){
				meInfo = item;
				break;
			}
		}
		
		
		emits('change',params,meInfo)
	}
	
</script>

<style>
</style>